<template>
	<view>
		<u-navbar :is-back="true" title="管理报名活动">
		</u-navbar>
		<view class="huodong-cont">
			<image src="../../../static/img/acitivity/activity-img.jpg" class="xuanchuantu"></image>
			<view class="huodong-jbxx">
				<view class="jbxx-cont">
					<view class="title u-font-28 color5">2021届会明最受欢迎网红评选海选</view>
					<view class="renshu-box">
						<view class="renshu-list u-font-24">
							报名人数<text class="color-green u-margin-left-10">20</text>
						</view>
						<view class="renshu-list u-font-24">
							总浏览数<text class="color-green u-margin-left-10">123520</text>
						</view>
						<view class="renshu-statu u-font-28">
							进行中
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="guanli-btn">
			<view class="guanli-btn-list">
				<image src="../../../static/img/acitivity/bianji.png" class="btn-icon"></image>
				<text class="btn-name">编辑</text>
			</view>
			<view class="guanli-btn-list">
				<image src="../../../static/img/acitivity/zanting.png" class="btn-icon"></image>
				<text class="btn-name">暂停</text>
			</view>
			<view class="guanli-btn-list">
				<image src="../../../static/img/acitivity/shanchu.png" class="btn-icon"></image>
				<text class="btn-name">删除</text>
			</view>
		</view>
		<view class="guanlihuodong-box">
			<view class="guanlihuodong-list">
				<text class="u-font-26">进入活动详情</text>
				<text class="u-font-28">></text>
			</view>
			<view class="guanlihuodong-list">
				<text class="u-font-26">报名人员管理</text>
				<text class="u-font-28">审核、联系报名人员></text>
			</view>
			<view class="guanlihuodong-list">
				<text class="u-font-26">分享活动</text>
				<text class="u-font-28">></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #e3e3e3;
	}
.huodong-cont{
	background-color: #FFFFFF;
	padding: 30rpx 35rpx 0rpx;
	.xuanchuantu{
		width: 100%;
		height: 343rpx;
	}
	.huodong-jbxx{
		display: flex;
		flex-direction: column;
		padding: 30rpx 0 40rpx;
		.jbxx-cont{
			.date{
				color: #8e908f;
				margin-top: 10rpx;
			}
			.color-green{
				color: #2ea34a;
			}
		}
		.zanting{
			color: #7b7b7b;
		}
	}
}
.renshu-box{
	display: flex;
	align-items: center;
	margin-top: 20rpx;
	.renshu-list{
		color: #8e908f;
		flex: 1;
	}
	.renshu-statu{
		color: #7b7b7b;
		width: 20%;
	}
}
.guanli-btn{
	background-color: #FFFFFF;
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid #eaeaea;
	padding: 30rpx 0;
	.guanli-btn-list{
		width: 33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.btn-icon{
			width: 45rpx;
			height: 45rpx;
		}
		.btn-name{
			color: #545454;
			font-size: 24rpx;
			margin-top: 10rpx;
		}
	}
}
.guanlihuodong-box{
	margin: 15rpx 20rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding: 0 50rpx 80rpx;
	.guanlihuodong-list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #767676;
		padding: 55rpx 0 20rpx;
		border-bottom: 1px solid #e3e3e3;
	}
}
</style> 
